<template>
	<view style="padding: 30rpx;">
		<view class="input_box flex">
			<text>联系人</text>
			<u--input placeholder="填写联系人姓名" border="none" v-model="info.name" inputAlign='right'></u--input>
		</view>
		<view class="input_box flex">
			<text>手机号</text>
			<u--input placeholder="填写手机号码" border="none" v-model="info.mobile" inputAlign='right'></u--input>
		</view>
		<view class="input_box flex" @click="chooseaddress">
			<view class="u-m-r-30">服务地址</view>
			<view class="area" v-if="info.area">{{info.area }}</view>
			<view class="area other" v-else>点击选择地址</view>
			<!-- <u--input placeholder="点击选择地址" border="none" readonly="true" v-model="info.area" inputAlign='right'></u--input> -->
			<u-icon name='play-right-fill'></u-icon>
		</view>
		<view class="detail">
			<textarea name="" placeholder="填写详细地址…" id="" cols="30" rows="10" v-model="info.address"></textarea>
		</view>
		<view class="submit-btn" @click="save">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				lat:'',
				lng:'',
				address:'',
				info:{
					name: '',
					mobile: '',
					id: '',
					province: '',
					city: '',
					district: '',
					area: '',
					address: '',
					lng: '',
					lat: ''
				}
			};
		},
		onLoad(option) {
			if(option.info){
				this.info = JSON.parse(option.info)
			}
		},
		methods:{
			save(){
				if(this.info.name === ''){
					this.$toast('请输入联系人姓名')
					return
				}
				if(!uni.$u.test.mobile(this.info.mobile)){
					this.$toast('请输入正确的手机号')
					return
				}
				if(this.info.city === ''){
					this.$toast('请选择地址')
					return
				}
				let data =  {
					type: 'add',
					state: this.info.state ? 1 : 0,
					province: this.info.province,
					city: this.info.city,
					district: this.info.district,
					area: this.info.area,
					address: this.info.address,
					name: this.info.name,
					mobile: this.info.mobile,
					lng: this.info.lng,
					lat: this.info.lat
				}
				if (this.info.id == ''){
					data.type = 'add'
					data.state = 0
				}else {
					data.type = 'edit'
					data.state = this.info.state
					data.id = this.info.id
				}
				this.$api.post('/address', data).then(res => {
					if (res.code == 1) {
						this.$toast(res.msg);
						uni.$emit('addressChange')
						setTimeout(() => {
							this.$back()
						}, 1000)
				
					}
				}).catch((res) => {
				
				})
			},
			chooseaddress(){
				let that = this
				uni.chooseLocation({
					longitude: that.info.lng?that.info.lng: '',
					latitude: that.info.lat?that.info.lat: '',
					success: function(res) {
						that.info.address = res.name
						that.info.area = res.address
						that.info.lng = res.longitude
						that.info.lat = res.latitude
						that.$api.post('/getlocation', {
							lng: res.longitude,
							lat: res.latitude,
						}).then(res => {
							if (res.code == 1) {
								that.info.province = res.data.province
								if(res.data.city === '[]'|| res.data.city.length === 0){
									that.info.city = res.data.province
								} else {
									that.info.city = res.data.city
								}
								that.info.district = res.data.district
							}
						}).catch((res) => {
						
						})
					}
				});

			}
			
		}
	}
</script>

<style lang="scss">
	.input_box {
		border-radius: 20rpx;
		padding: 30rpx;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		width: 85vw;
		margin: 30rpx auto;
		.area{
			flex: 1;
			overflow: hidden;
			
		}
		.other{
			text-align: right;
			color: #999;
		}
	}
	.detail{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 20rpx;
	}
</style>